<template>
    <div id="app" class="mainPage">
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive" />
            <!-- <router-view v-if=""></router-view> -->
        </keep-alive>
        <keep-alive :include="dynamicRoutes">
            <router-view v-if="!$route.meta.keepAlive" />
        </keep-alive>
        <van-tabbar

            v-show="tabbarShowFlag"
            safe-area-inset-bottom
            route
            active-color='#F65D5D'
            inactive-color='#A8A7A5'
        >
            <van-tabbar-item icon="wap-home"
                to='/index'
            >首页</van-tabbar-item>
            <van-tabbar-item icon="like"
                to='/voluteerActivity'
            >志愿活动
            </van-tabbar-item>
            <van-tabbar-item icon="medel"
                to='/volunteerSort'
            >
                志愿排名
            </van-tabbar-item>
            <van-tabbar-item icon="manager"
                to='/user'
            >
                个人中心
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
import "../static/css/reset.css";
import "@/common/css/common.scss";

import { mapGetters, mapMutations,mapState } from "vuex";
import router from './router'
export default {
    name: "app",
    data(){
        return {
            tabbarShowFlag:true,
            tabbatActivite:0,
            tabbarIcons:[
                
            ]
        }
    },
    computed:{
        ...mapGetters(["dynamicRoutes"]),
    },
    methods:{
        rewiteError(){
            console.log(router.routes)
             let curRouteIndex=router.routes.findIndex(x=>x.path==this.$route.path)
             let queryRoute=router.routes.some(x=>{
                 let match=this.$route.path.match(/\/(.+?)\//g)
                 let pathMatch=x.path.match(/\/(.+?)\//g)
                 return match&&match[0]==pathMatch&&pathMatch[0]
             })
             if(curRouteIndex===-1&&queryRoute){
                this.$router.replace('/index')
             }
        }
    },
    created(){
        // this.rewiteError()
    },
    watch: {
        $route(to,from) {
            this.tabbarShowFlag=['/index','/volunteerSort','/voluteerActivity','/user'].includes(to.path)
            // if(changeBgGroup)
            console.log(router.changeBgGroup,to.path)
            // this.rewiteError()
            if(router.changeBgGroup.includes(to.path)||router.changeBgGroup.includes(to.path.replace('/',''))){
                this.$nextTick(() => {
                    document.body.style.backgroundColor='#f5f5f5'
                });
                
            }else{
                 document.body.style.backgroundColor='#fff'
            }
        }
    }
    
}
</script>
<style lang='scss' rel="stylesheet/scss">
#app {
     font-family: Helvetica Neue, Tahoma, Arial, PingFangSC-Regular,
        Hiragino Sans GB, Microsoft Yahei, sans-serif;
    -webkit-font-smoothing: antialiased;
}
/deep/ .van-tabbar--fixed{
    box-shadow:0px 3px 13px 0px rgba(0, 0, 0, 0.1);
}

.avatar-edit {
    .van-uploader__upload, .van-image.van-uploader__preview-image,.van-uploader__file {
        width: 34px !important;
        height: 34px !important;
    }
}
</style>
